<template>
  <div class="aside">
    <div class="air-info">
      <el-row type="flex" justify="space-between" class="info-top">
        <div>{{data.arr_date}}</div>
        <div>{{data.org_city_name}}-{{data.dst_city_name}}</div>
      </el-row>
      <el-row type="flex" justify="space-between" align="middle" class="info-step">
        <el-col :span="5" class="flight-airport">
          <strong>{{data.dep_time}}</strong>
          <span>{{data.org_airport_name}}{{data.org_airport_quay}}</span>
        </el-col>
        <el-col :span="14" class="flight-time">
          <span>--- {{time}}---</span>
          <span>{{data.airline_name}}{{data.flight_no}}</span>
        </el-col>
        <el-col :span="5" class="flight-airport">
          <strong>{{data.arr_time}}</strong>
          <span>{{data.dst_airport_name}}{{data.dst_airport_quay}}</span>
        </el-col>
      </el-row>
    </div>
    <el-row type="flex" justify="space-between" class="info-bar">
      <span>订单总价</span>
      <span>金额</span>
      <span>数量</span>
    </el-row>
    <el-row type="flex" justify="space-between" class="info-bar">
      <span>成人机票</span>
      <span>￥{{data.base_price}}</span>
      <span>x{{res.Total}}</span>
    </el-row>
    <el-row type="flex" justify="space-between" class="info-bar">
      <span>机建＋燃油</span>
      <span>¥50/人/单程</span>
      <span>x{{res.Total}}</span>
    </el-row>
    <el-row type="flex" justify="space-between" align="middle" class="info-bar">
      <span>应付总额：</span>
      <span class="price">
        ￥
        <countTo :startVal="startVal" :endVal="res.res" :duration="1000"></countTo>
      </span>
    </el-row>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
    res: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      startVal: 1000
    };
  },
  components: { countTo },

  // 计算路程需要的时间
  computed: {
    time() {
      if (!this.data.dep_time) {
        return;
      }
      const arrtime = this.data.arr_time.split(":");
      const deptime = this.data.dep_time.split(":");
      const arrT = arrtime[0] * 60 + +arrtime[1];
      const depT = deptime[0] * 60 + +deptime[1];
      const time = arrT - depT;
      // 如果第二天凌晨时间段，开始时间需要加24小时
      if (time < 0) {
        time = arrt + 24 * 60 - depT;
      }
      return `${Math.floor(time / 60)}时${time % 60}分`;
    }
  }
};
</script>

<style scoped lang="less">
/*aside*/
.aside {
  width: 350px;
  height: fit-content;
  border: 1px #ddd solid;
}

.air-info {
  padding: 15px;

  .info-top {
    margin-bottom: 10px;
    > div:last-child {
      font-size: 14px;
    }
  }

  .info-step {
    .flight-airport {
      strong {
        display: block;
        font-size: 22px;
        font-weight: normal;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }

    .flight-time {
      text-align: center;
      font-size: 12px;
      color: #999;
      span {
        display: block;
      }
    }
  }
}

.info-bar {
  border-top: 1px #ddd dashed;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;

  .price {
    font-size: 28px;
    color: orange;
  }
}
</style>